<template>
  <div class='detail'>
    <nav class="bc-green">
      <span>共{{detailData.info?detailData.info.num:0}}人</span>
      <div class="search-box"><Search :search="searchInfo" @new_search="getSearch" /></div>
    </nav>
    <div class="list bc-gray">
      <ul>
        <li v-for="(item, index) in detailData.list" :key="index" class="bc-white">
          <img :src="item.wx_pic||item.photo||defaultImg" alt="">
          <p>
            <span class="name">{{item.name}}</span>
            <span class="number">{{item.number}}</span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import MixIns from '@/mixin/mixin.js'
import Search from '@/components/search.vue'
export default {
  components: {Search},
  name: "",
  data() {
    return {
      searchInfo:{
        search:""
      },
      defaultImg:require("../../../../assets/images/message/default.jpg")
    };
  },
  methods: {
    getSearch(){

    }
  },
  created() {},
  mixins:[MixIns]
};
</script>
<style lang="scss" scoped>
.detail {

  .bc-green{
    display: flex;
    justify-content: space-around;
    padding: 0 15px;

    >span{
      color: #fff;
      text-align: center;
      line-height: 105px;
    }
  }
  .search-box{
    flex: 1;
  }
  .active:active{
    background-color: transparent;
  }
  .list{
    height: calc(100% - 80px);
    overflow: auto;

    li{
      padding: 20px;
      display: flex;
      box-sizing: border-box;
      border-bottom: 1px solid #ddd;

      img{
        width: 132px;
        height: 132px;
        border-radius: 50%;
        box-shadow: 1px 1px 3px 0 #000;
      }
      p{
        margin-left: 20px;
        height: 100%;
        display: flex;
        flex-direction: column;

        .name{
          font-size: 16px;
          margin: 15px 0;
        }
      }
    }
  }
}
</style>